<template>
  <div>
      <StoreChoice
        ref="StoreChoice"
        :isReset="isReset"
        :current="store"
        :stylewidth="{'width': '82.7%'}"
        :multipleChoice="true"
        @listenToStoreSelect="getSelectStoreValue"
        :statusFilter="false"
        :hasTotal="false"
      />
    <mt-popup v-model="popupVisible" :style="{'width': '82.7%'}" position="right" :modal="true" class="accountStatement-filterItem">
      <customHeader middleTitle="筛选" @leftCallBack="back"  :jsBridgeBack="false"/>

      <div class="section">
        <div class="title">时间范围</div>
        <div class="picker-val" @click="startPicker">
          <span>{{startDate}}</span><p class="picker-val-p"></p><span>{{endDate}}</span>
        </div>
      </div>
      <div class="section" v-show="tab!='area'">
        <div class="title">门店范围</div>
        <div class="picker-val" @click="handleClickSelectStore">
          <span class="picker-val-span">{{formateStore}}</span>
          <!-- <i v-if="this.roleInfo.manyShopFlag" class="zhk-list_rarrow"></i> -->
        </div>
      </div>
      <div class="section">
        <div class="title">支付方式</div>
        <ul class="check-list">
          <li
            class="item"
            :class="{checked:item.checked}"
            v-for="(item,index) in payTypeList"
            :key="index"
            @click="handleCheck(item)"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
      <div class="btn-wrap btn-wrap-padding margin-safe-area-bottom">
        <div class="btn-wrap-left" @click="reset">重置</div>
        <div class="btn-wrap-right" @click="sure">确定</div>
      </div>
    </mt-popup>
    <mt-datetime-picker
      ref="startPicker"
      type="date"
      :modal="false"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      confirmText="确认"
      cancelText=""
      @confirm="endPicker"
      @cancel="cancelPicker"
      :startDate="startDateScope"
      :endDate="sEndDate"
    ></mt-datetime-picker>
    <mt-datetime-picker
      ref="endPicker"
      type="date"
      :modal="false"
      cancelText=""
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      :startDate="startDateScope"
      :endDate="endDateScope"
      @confirm="dateChoice"
      @cancel="cancelPicker"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Popup, Toast } from "mint-ui";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import customHeader from "../../components/header/header";
import moment from "moment";
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.component(Popup.name, Popup);
export default {
  name: "filterItem",
  data() {
    return {
      isReset: true, //门店重置
      startDate: "开始日期",
      endDate: "结束日期",
      selectValue: "1",
      popupVisible: false,
      startSelectDate:  this.defaultDate[0],
      endSelectDate: this.defaultDate[1],
      dateName: "选择日期",
      startDateScope: this.defaultDate[0],
      endDateScope: new Date(),
      sEndDate:  new Date(),
      payTypeList: this.payType, //收款方式
      store: [],
      isAllStore: true, //是否选择了全部门店
      filterBak: {
        startDate: moment(this.defaultDate[0]).format("YYYY-MM-DD"),
        endDate: moment(this.defaultDate[1]).format("YYYY-MM-DD"),
        store: [],
        payTypeList: [],
        isAllStore: true
      },
      tab:this.tabType
    };
  },
  components: {
    customHeader,
    StoreChoice
  },
  computed: {
    formateStore() {
      let val = "";
      if(this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag){
          this.store= [{ selectName: this.roleInfo.shopName, selectKey: this.roleInfo.yzShopId }];
           val = this.roleInfo.shopName;
      }else if (!this.isAllStore) {
        if (this.store.length === 1) {
          val = this.store[0].selectName;
        } else {
          val = "已选择" + this.store.length + "家门店";
        }
      } else {
        val = "全部门店";
      }
      return val;
    }
  },
  props: {
    initialStartDateScope: {
      type: Date,
      default: () => {
        return new Date("2000");
      }
    },
    defaultDate: {
      type: Array
    },
    payType: {
      type: Array
    },
    roleInfo:{
      type:Object
    },
    tabType:{
      type:String
    }
  },
  methods: {

    //设置默认日期
    setDefault() {
      if (this.defaultDate&&this.defaultDate.length>1) {
        this.startDate = moment(this.defaultDate[0]).format("YYYY-MM-DD");
        this.endDate = moment(this.defaultDate[1]).format("YYYY-MM-DD");
        this.startSelectDate = this.defaultDate[0];
        this.endSelectDate = this.defaultDate[1];
      }
    },

    //门店选择回调
    getSelectStoreValue(value, storeName) {
      if (storeName === "全部门店") {
        this.isAllStore = true;
      } else {
        this.isAllStore = false;
      }
      this.store = value;
    },
    //打开门店选择
    handleClickSelectStore() {
      if(this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag){
        return;
      }
      this.$refs.StoreChoice.popupShow();
    },
    //支付方式项选择
    handleCheck(item) {
      this.payTypeList.forEach(function(currentValue, index, arr) {
        if (item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        }
      });
    },
    //日期选择展开
    startPicker() {
      let dt = new Date(this.defaultDate[1]);
      dt.setMonth( dt.getMonth()-6 );
      dt.setDate(1);
      this.startDateScope = new Date(dt);
      this.endDateScope = new Date();
      this.$refs.startPicker.open();
    },
    //结束日期展开
    endPicker(e) {
      const startDate =
        e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + e.getDate();
      let iToDay = e.getDate();
      let iToMon = e.getMonth();
      let iToYear = e.getFullYear();
      let newDay = new Date(iToYear, iToMon, iToDay + 92);

      this.startDateScope = e;
      if (newDay > this.sEndDate) {
        this.endDateScope = this.sEndDate;
      } else {
        this.endDateScope = newDay;
      }

      this.startDate = startDate;
      this.$refs.endPicker.open();
      this.startSelectDate = e;
    },
    //结束日期选择
    dateChoice(e) {

      const endDate =
        e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + e.getDate();
      this.endDate = endDate;
      this.endSelectDate = e;
      //选择日期后近几日选项非选中
      const radioList = $(".date-radio-list .item");
      for (let i = 0; i < radioList.length; i++) {
        radioList[i].className = "item";
      }
      //组件内部的回显
      this.selectValue = this.startDate + "～" + this.endDate;
      //回显到组件外面的时间格式01-01至01-01
      const Appendzero = obj => {
        if (obj < 10) return "0" + "" + obj;
        else return obj;
      };
      const satrtDateName =
        Appendzero(this.startSelectDate.getMonth() + 1) +
        "-" +
        Appendzero(this.startSelectDate.getDate());
      const endDateName =
        Appendzero(e.getMonth() + 1) + "-" + Appendzero(e.getDate());
      this.dateName = satrtDateName + "至" + endDateName;
      // this.popupHide();

      var dateDiff = this.endSelectDate.getTime() - this.startSelectDate.getTime();//时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
      if(dayDiff>30){
        Toast("搜索时间范围不能大于31天！");
        // this.startDate = "开始日期";
        // this.endDate = "结束日期";
        const normal = new Date(this.startSelectDate.getTime()+24 * 3600 * 1000*30);
        const endDate = normal.getFullYear() + "-" + (normal.getMonth() + 1) + "-" + normal.getDate();
        this.endDate = endDate;
        // this.startSelectDate = null;
        // this.endSelectDate = null;
        this.endSelectDate = normal;
      }

    },
    //关闭日期组件
    cancelPicker() {
      const selectValue = this.selectValue;
      this.startDate = "开始日期";
      this.endDate = "结束日期";
      this.selectValue = selectValue;
      this.startSelectDate = null;
      this.endSelectDate = null;
      this.startDateScope = new Date(new Date() - 31 * 24 * 60 * 60 * 1000);
      this.endDateScope = new Date(new Date() - 31 * 24 * 60 * 60 * 1000);
    },
    popupShow() {
      this.popupVisible = true;
    },
    filterSure() {
      this.popupVisible = false;
      debugger
      const selectObj = {
        startDate: this.startSelectDate,
        endDate: this.endSelectDate,
        store: this.store,
        payType: this.payTypeList.filter(item => {
          return item.checked === true;
        })
      };
      this.$emit("filterChoice", selectObj);

      //存备份数据
      this.filterBak.startDate = JSON.parse(JSON.stringify(this.startDate));
      this.filterBak.endDate = JSON.parse(JSON.stringify(this.endDate));
      this.filterBak.store = JSON.parse(JSON.stringify(this.store));
      this.filterBak.payTypeList = JSON.parse(JSON.stringify(this.payTypeList));
      this.filterBak.isAllStore = this.isAllStore;
    },

    //返回
    back() {
      //还原备份数据
      this.startDate = JSON.parse(JSON.stringify(this.filterBak.startDate));
      this.endDate = JSON.parse(JSON.stringify(this.filterBak.endDate));

      this.payTypeList = JSON.parse(JSON.stringify(this.filterBak.payTypeList));
      if (this.filterBak.store.length > 0) {
        this.store = JSON.parse(JSON.stringify(this.filterBak.store));
      } else {
        this.isReset = new Date();
      }
      this.isAllStore = this.filterBak.isAllStore;
      this.popupVisible = false;
    },

    //重置
    reset() {
      this.setDefault();
      this.isReset = new Date();
      this.payTypeList.forEach(v => {
        v.checked = true;
      });
    },
    //确定
    sure() {
      if(this.startSelectDate==null){
        Toast("请选择开始时间！");
        return;
      }
       if(this.endSelectDate==null){
        Toast("请选择结束时间！");
        return;
      }
      if (
        this.payTypeList.every(item => {
          return item.checked === false;
        })
      ) {
        Toast("请选择支付方式！");
        return;
      }
      this.filterSure();
    }
  },
  created() {
    this.setDefault();

  },
  watch: {
    payType(newVal) {
      this.payTypeList = newVal;
      this.filterBak.payTypeList = JSON.parse(JSON.stringify(newVal));
    },
    tabType(n,o){
      if(n!=o){
        this.tab=n;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "accountStatement";
@import './details.scss';


</style>
<style lang="scss" >
@import "../../style/public";
.mint-popup-bottom{
  border-radius: pw(10) pw(10) 0 0 !important;
}
.picker-toolbar{
  border-radius: pw(10) pw(10) 0 0 !important;
}
.mint-datetime-picker{
   border-radius: pw(10) pw(10) 0 0 !important;
}
  .picker-toolbar .mint-datetime-confirm{
    width: pw(355);
    height: pw(44);
    line-height:pw(44);
    text-align: center !important;
    color: #fff !important; 
    background: linear-gradient(271.44deg, #F54722 0%, #D81212 100%) !important;
    position: absolute;
    bottom: pw(10);
    z-index: 2006;
    left: 50%;
    margin-left:pw(-177) ;
    border-radius: pw(10);
  }
  .mint-datetime-cancel{
    width: pw(32);
    height: pw(32);
    background-image: url(../../assets/images/tf/closeicon.png);
    position: absolute;
    right: pw(6);
    top: pw(6);
  }
  .picker-toolbar{
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    &::before{
      display: block;
      content:'起始时间';
      font-weight: 500;
      font-size: pw(14);
    }
  }
</style>
